<template>
	<view>
		<uni-section title="当月汇总" type="line"> </uni-section>
		<uni-card :is-shadow="true">
			<view class="uni-flex uni-row">
				<view class="text"> 流入：<span class="numIn">{{ inTotal }}</span> </view>
				<view class="text">流出：<span class="numOut">{{outTotal}}</span> </view>
			</view>
		</uni-card>
		<uni-section title="当月明细" type="line"> </uni-section>
		<uni-list>
			<uni-list-item v-for="l in list" :key="l._id" :showArrow="false">
				<view class="uni-flex uni-row">
					<text class=" iconfont ll uni-flex" :class="[l.billType.icon||'icon-jushoucang']">{{l.billType.name}}</text>
					<text class="lc">{{l.l}}</text>
					<strong class="lr uni-flex" :class="[l.billType.Pid>0?'numIn':'numOut']">￥：{{l.money}}</strong>
				</view>
				
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniCard from '@/components/uni-card/uni-card.vue'
	export default {
		components: {
			uniSection,
			uniListItem,
			uniList,
			uniCard
		},
		data() {
			return {
				list: [],
				inTotal: 0,
				outTotal: 0
			}
		},
		onLoad() {
			wx.cloud.init();
			this.getTotal(s => {
				this.inTotal = s.i;
				this.outTotal = s.o;
			});
			this.getList(s => {
				this.list = s
			})
		},
		methods: {
			getTotal(s, f) {
				uni.showLoading();
				let time = new Date();
				wx.cloud.callFunction({
						name: "billDataBase",
						data: {
							funName: "getMonthTotal",
							month: time.getYear() * 100 + time.getMonth() + 1
						}
					})
					.then(r => {
						console.log(r);
						if (r && r.result && r.result.a) {
							if (s) s(r.result.b);
						} else {
							if (f) f(r.errMsg);
						}
						uni.hideLoading();
					});
			},
			getList(s, f) {
				uni.showLoading();
				let time = new Date();
				wx.cloud.callFunction({
						name: "billDataBase",
						data: {
							funName: "getBillList",
							month: time.getYear() * 100 + time.getMonth() + 1
						}
					})
					.then(r => {
						console.log(r);
						if (r && r.result && r.result.a) {
							if (s) s(r.result.b);
						} else {
							if (f) f(r.errMsg);
						}
						uni.hideLoading();
					});
			}
		}
	}
</script>

<style>
	.text {
		-webkit-flex: 1;
		flex: 1;
		text-align: center;
	}

	.numIn {
		color: #09BB07;
	}

	.numOut {
		color: #FF0000;
	}
	.ll{
		width: 180rpx;
		flex: 1;
		-webkit-align-items: center;
		align-items: center;
		font-size: 35rpx;
	}
	.lc{
		width: 220rpx;
		font-size: 25rpx;
	}
	.lr{
		-webkit-flex: 1;
		flex: 1;
		width: 180rpx;
		text-align: right;
		-webkit-align-items: center;
		align-items: center;
	}
</style>
